export {}
function time(date?: Date | string) {
  // 如果没有值,就new date
  if (!date) {
    date = new Date()
  }
  // 如果data有值,并且是字符串类型的也要new 一个
  if (typeof date === 'string') {
    date = new Date(date)
  }
  // 获取时分秒
  const h = date.getHours()
  const m = date.getMinutes()
  const s = date.getSeconds()
  // 把时分秒拼接起来并且return出去
  return `${h}:${m}:${s}`
}
//定义访问记录类型
type Data = {
  count: number
  time: string
}
// 定义数组存储数据
type List = Array<Data>

// key的字面量类型
const KEY = 'ts-demo-data'

// 封装获取历史记录的函数
const getData = () => {
  // 根据key去获取值str
  const str = localStorage.getItem(KEY)
  // 在把值转化成想要的类型
  return JSON.parse(str || '[]') as List
}
// 封装一个方法,用来修改当前的访问记录
const updateData = () => {
  const List = getData()
  // 获取到当前数组里的最后一项
  const lastItem = List[List.length - 1]
  // 向数组里添加
  List.push({
    // 判断当前数组里是否有值
    count: lastItem ? lastItem.count + 1 : 1,
    time: time(),
  })
  // 向本地持久化存储
  localStorage.setItem(KEY, JSON.stringify(List))
}
// 封装一个读取的
const render = () => {
  //调用修改访问记录的方法
  updateData()
  //获取当前的访问次数
  const data = getData()
  // 不会
  const app = document.querySelector('#app') as HTMLDivElement
  app.innerHTML = data.map((item) => `次数：${item.count}，时间：${item.time}`).join('<br/>')
}
render()
